<template>
   <!-- 通过render函数渲染dom -->
    <div class="render-Wrapper">
        <render-list :list="list" :renderFunc="renderFunc"></render-list>
    </div>
</template>

<script>
import renderList from '_c/renderList'
//这个组件通过渲染函数渲染的就不用再components对象里注册了
import CountTo from '../components/countTo';
export default {
    components: { renderList },
    data() {
        return {
            list:[
                {id:1,name:'张三',time:60},
                {id:2,name:"李四",time:45}
            ]
        };
    },
    mounted() {
        
    },
    methods: {
        // 这是最直观的render渲染搭配函数式组件渲染节点(别想为什么函数式组件里return的值这里能接受到 我也不知道)
        // renderFunc(h,name){
        //     return h('i',{
        //         style:{
        //             color:'red'
        //         }
        //     },name)
        // }
        
        //这是jsx方式渲染(就跟在react里写差不多,绑定事件不一样) 这里记住第一个参数名必须是h
        renderFunc(h,name,time){
            return (
                <div>
                  <i on-click={this.handelClick} style={{color:'red'}}>{name}</i>
                    {/* 在渲染函数里渲染其他组价 */}
                   <CountTo endVal={time}></CountTo>
                </div>
            )
        },
        handelClick(event){
            console.log(event);
        }
    }
};
</script>

<style lang="less" scoped>
</style>